<template>
  <div id="TireList">
    <div class="top-img">
      <img :src='topImg' alt="">
    </div>
    <div class="white-box nav-list">
      <div class="top-nav">
        <div>
          <a href="javascript:;" @click="tabChange('top',index,item.st_id)" :class="{'top-nav-active':topTab==index}" v-for="(item,index) in topTabNav" :key="item.st_id">{{item.st_name}}</a>
        </div>
      </div>
      <div class="left-nav">
        <div v-if="leftType==0">
          <a href="javascript:;" @click="tabChange('left',index,item.sign_id)" :class="{'left-nav-active':leftTab==index}" v-for="(item,index) in leftTabNav" :key="item.sign_id">{{item.sign_name}}</a>
        </div>
        <div v-if="leftType==1">
          <a href="javascript:;" @click="tabChange('left',index,item.st_id)" :class="{'left-nav-active':leftTab==index}" v-for="(item,index) in leftTabNav" :key="item.st_id">{{item.st_name}}</a>
        </div>
      </div>
      <div class="goods-list">
        <scroller :height="height" lock-x ref="scrollerBottom" :scroll-bottom-offst="10" style="margin-bottom: 34px;padding-bottom: 15px">
          <div class="box2">
            <group class="list-item" v-for="(item,index) in goods" :key="index">
              <i v-if="item.qishi"><img src="../../assets/images/list_icon.png" alt=""></i>
              <i v-if="item.yiwei"><img src="../../assets/images/list_icon_yiwei.png" alt=""></i>
              <h4>{{item.name}}</h4>
              <x-number :title="item.title" v-model="item.battery_number" button-style="round" :min="0" @on-change="numFun(item)" fillable>
              </x-number>
            </group>
            <load-more tip="正在加载" v-show="onFetching"></load-more>
          </div>
        </scroller>
      </div>
    </div>
    <!--<CartList></CartList>-->
    <group class="car">
      <div class="weui-cell">
        <div class="car-icon" @click="showAlertBox">
          <img src="../../assets/images/car.jpg" alt="">
          <i>{{totalCartNum}}</i>
        </div>
        <span>总金额: <i>{{totalPrice}}</i></span>
      </div>
    </group>
    <div class="back" v-show="showAlert" @click="closeAlertBox"></div>

    <transition name="fade">

      <div class="cart-list" v-show="showAlert">
        <p class="weui-cells__title">采购单 <span @click="clearFun" style="float: right;font-size: 14px;margin-top: 2px;color: #888">清空采购单</span></p>
        <scroller class="scroller" height="-300" lock-x ref="scrollerBottombox" :scroll-bottom-offst="10" style="margin-bottom: 58px">
          <div class="box2">
            <group class="list-item" v-for="(item,index) in goodsChecked" :key="index">
              <i v-if="item.qishi"><img src="../../assets/images/list_icon.png" alt=""></i>
              <i v-if="item.yiwei"><img src="../../assets/images/list_icon_yiwei.png" alt=""></i>
              <h4>{{item.name}}</h4>
              <x-number :title="item.title" v-model="item.battery_number" fillable button-style="round" :min="0" @on-change="numFunCart(item)"></x-number>
            </group>
            <load-more tip="正在加载" v-show="onFetchingAlert"></load-more>
          </div>
        </scroller>
        <group class="car">
          <div class="weui-cell" style="padding: 17px 15px 20px">
            <span style="display: inline-block;width: 30%">总金额: <i>{{totalPrice}}</i></span>
            <b>(共{{totalNum}}只)</b>
            <x-button mini type="primary" @click.native="submitFun()" style="width: 100px;positive:relative;top:0;left:0">确定</x-button>
          </div>
        </group>
        <div class="car-icon">
          <img src="../../assets/images/car.jpg" alt="">
          <i>{{totalCartNum}}</i>
        </div>
      </div>
    </transition>
    <div v-transfer-dom>
      <alert v-model="showAlertMsg"> {{ contentAlert }}</alert>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, XInput, XButton , Checker, CheckerItem, AlertModule, Alert, TransferDomDirective as TransferDom,XNumber,Scroller,LoadMore,cookie } from 'vux'
  import { GetTypeList,GetgoodsList,getBatteryAttr,getBatteryByAttr,addCart  } from '../../mock/api'
  // import CartList from '../../components/CartList'
  import { Decrypt } from '../../aes/aes'
  import { sorts,sign } from '../../aes/make'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      XInput,
      XButton,
      Checker,
      CheckerItem,
      Alert,
      XNumber,
      Scroller,
      LoadMore,
      // CartList
    },
    data () {
      return {
        height:'-125',//-80
        showAlert: false,
        showAlertMsg:false,
        contentAlert:'',
        leftType:'0',
        leftTabNav:[],
        topTabNav:[],
        leftTab:'0',
        leftTabId:'0',
        topTab:'0',
        topTabId:'0',
        firstList:[],
        first:'',
        endList:[],
        end:'',
        roundValue:0,
        goods:[],
        goodsChecked:[],
        goodsNum:0,
        onFetching: false,
        onFetchingAlert: false,
        topImg:''
      }
    },
    computed:{
      totalNum(){
        let num=0;
        for(var i in this.goodsChecked){
          num+=this.goodsChecked[i].battery_number;
        }
        return num;
      },
      totalCartNum(){
        let num=0;
        for(var i in this.goodsChecked){
          num+=this.goodsChecked[i].battery_number;
        }
        if(num.toString().length>3){
          num='...';
        }
        return num;
      },
      totalPrice(){
        let price=0;
        for(var i in this.goodsChecked){
          var p=this.goodsChecked[i].battery_number*this.goodsChecked[i].price;
          price+=p;
        }
        price=price.toFixed(2);
        return price;
      }
    },
    created () {
      let vue = this;
      let title=this.$route.query.name;
      vue.updateTitle(title);
      vue.updatePreventGoBack(false);
      let goodsChecked=cookie.get('goodsChecked');
      goodsChecked=JSON.parse(goodsChecked);
      this.goodsChecked=goodsChecked;
    },
    mounted(){
      this.$nextTick(() => {
        this.$refs.scrollerBottom.reset({top: 0})
      });
      this.tabFun();
    },
    methods: {
      changeNum(item){
        if(/[^0-9]/.test(item.battery_number)){
          var str=item.battery_number.toString();
          str=str.replace(/[^0-9]/,"");
          if(str==''){
            console.log(str);
            str=Number(0)
            console.log(str)
          }else{
            str=strNumber(str)
          }
          item.battery_number=str
        }
      },
      clearFun(){
        for(var j in this.goodsChecked){
            this.goodsChecked[j].battery_number=0;
            this.goodsChecked.splice(j,1);
        }
        this.goodsFun();
        cookie.set('goodsChecked',this.goodsChecked);
      },
      tabFun(){
        let vue=this;
        var json={
          tow_type_id:this.$route.query.id
        };
        var gid=cookie.get('gid');
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var sort=sorts();
        json['gid']=gid;
        json['uid']=uid;
        json['access_token']=access_token;
        json['sorts']=sort;
        var si=sign(json);
        json['sign']=si;
        GetTypeList(json).then((res) => {
          if(res.code==2000){
            // var data=Decrypt(res.data);
            // data=JSON.parse(data);
            var data=res.data;
            this.topTabNav=data.cata;
            if(data.cata && data.cata!=''){
              this.topTabId=data.cata[0].st_id;
            }else if(!data.cata || data.cata==''){
              this.height='-80';
            }
            if(data.signs){
              this.leftTabNav=data.signs;
              this.leftTabId=data.signs[0].sign_id;
              this.leftType=0;
            }else if(data.types){
              this.leftTabNav=data.types;
              this.leftTabId=data.types[0].st_id;
              this.leftType=1;
            }
            this.goodsFun();
          }else if(res.code > 3000 &&  res.code < 4000){
            this.showAlertMsg=true;
            this.contentAlert=res.message;
            setTimeout(function(){
              vue.$router.replace({name: 'login'});
            },1200)
          }else{
            this.showAlertMsg=true;
            this.contentAlert=res.message;
          }
        });
      },
      tabChange(type,index,id){
        if(type=='top'){
          this.topTab=index;
          this.topTabId=id;
        }else if(type=='left'){
          this.leftTab=index;
          this.leftTabId=id;
        }
        this.goodsFun();
      },
      goodsFun(){
        let vue=this;
        this.goods=[];
        this.onFetching=true;
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset({top: 0})
        });
        if(this.leftType==0){
          var json={
            tow_type_id:this.$route.query.id,
            signid:this.leftTabId,
            typeid:this.$route.query.id,
            attrid:this.topTabId
          };
        }else if(this.leftType==1){
          var json={
            tow_type_id:this.$route.query.id,
            typeid:this.$route.query.id,
            attrid:this.leftTabId,
            attrid2:this.topTabId
          };
        }
        var gid=cookie.get('gid');
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var sort=sorts();
        json['gid']=gid;
        json['uid']=uid;
        json['access_token']=access_token;
        json['sorts']=sort;
        var si=sign(json);
        json['sign']=si;
        GetgoodsList(json).then((res) => {
          if(res.code==2000){
            // var data=Decrypt(res.data);
            // data=JSON.parse(data);
            var data=res.data;
            this.topImg=data.top_img;
            data=data.goods_list;
            for(var i in data){
              var num=0;
              for(var j in this.goodsChecked){
                if(this.goodsChecked[j].prd_id==data[i].goods_id){
                  num=this.goodsChecked[j].battery_number;
                  break;
                }
              }
              var json={
                prd_id:data[i].goods_id,
                name:data[i].goods_name,
                price:data[i].price,
                battery_number:num,
                title:'￥ '+data[i].price,
              }
              if(data[i].qishi){
                json['qishi']=data[i].qishi;
              }else if(data[i].yiwei){
                json['yiwei']=data[i].yiwei;
              }
              this.goods.push(json);
            }
            this.onFetching=false;
          }else if(res.code > 3000 &&  res.code < 4000){
            this.showAlertMsg=true;
            this.contentAlert=res.message;
            setTimeout(function(){
              vue.$router.replace({name: 'login'});
            },1200)
          }else{
            this.onFetching=false;
            this.showAlertMsg=true;
            this.contentAlert=res.message;
          }
        });
      },
      showAlertBox(){
        this.showAlert=true;
      },
      closeAlertBox(){
        this.showAlert=false;
      },
      numFun(item){
        // console.log(item);
        var str=item.battery_number.toString();
        if(/[^0-9]/.test(str)){
          str=str.replace(/[^0-9]/,"");
          str=Number(str);
          item.battery_number=str
        }
        var f=false;
        for(var i in this.goodsChecked){
          if(this.goodsChecked[i].prd_id==item.prd_id){
            f=true;
            if(item.battery_number==0){
              this.goodsChecked.splice(i,1);
            }else{
              this.goodsChecked[i].battery_number=item.battery_number;
            }
          }
        }
        if(f==false && item.battery_number>0){
          this.goodsChecked.push(item);
        }
        var goods=JSON.stringify(this.goodsChecked);
        cookie.set('goodsChecked',goods);
      },
      numFunCart(item){
        // console.log(item);
        var str=item.battery_number.toString();
        if(/[^0-9]/.test(str)){
          str=str.replace(/[^0-9]/,"");
          str=Number(str);
          item.battery_number=str
        }
        for(var i in this.goods){
          if(this.goods[i].prd_id==item.prd_id){
            if(item.battery_number==0){
              this.goods.splice(i,1);
            }else{
              this.goods[i].battery_number=item.battery_number;
            }
          }
        }
        var goods=JSON.stringify(this.goodsChecked);
        cookie.set('goodsChecked',goods);
      },
      submitFun(){
        let vue=this;
        var prd=[];
        // console.log(this.goodsChecked)
        for(var i in this.goodsChecked){
          var j={
            prd_id:this.goodsChecked[i].prd_id,
            battery_number:this.goodsChecked[i].battery_number
          }
          prd.push(j)
        }
        prd=JSON.stringify(prd);
        var json={
          receivabler_id:this.receivabler_id,
          settlement_type:1
        }
        var uid=cookie.get('recovery_user_id');
        var access_token=cookie.get('access_token');
        var sort=sorts();
        json['recovery_user_id']=uid;
        json['access_token']=access_token;
        json['sorts']=sort;
        var si=sign(json);
        json['sign']=si;
        json['prd']=prd;
        addCart(json).then((res) => {
          if(res.code==2000){
            this.$router.push({name: 'AcceptanceCheckConfirmPoint', query: {phone:this.phone}});
          }else if(res.code > 3000 &&  res.code < 4000){
            this.showAlertMsg=true;
            this.contentAlert=res.message;
            setTimeout(function(){
              vue.$router.replace({name: 'login'});
            },1200)
          }else{
            this.showAlertMsg=true;
            this.contentAlert=res.message;
          }
        });
      }
    }
  }
</script>

<style lang="less">
  @green:#259B24;
  @hui:#878787;
  @huang:#FF9800;
  @rem:1rem/75;
  #TireList{
    background-color: #ffffff;
    .top-img{
      width: 100%;
      height:150px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .nav-list{
      position: relative;
    }
    .left-nav{
      position: absolute;
      left: 0;
      top: 0;
      width: 25%;
      background-color: #f0f0f0;
      a{
        display: block;
        width: 100%;
        font-size: 16px;
        text-align: center;
        line-height: 1.5rem;
        border-bottom: 1px solid #dedede;
      }
      a.left-nav-active{
        background-color: #ffffff;
      }
    }
    .top-nav{
      margin-left: 2.5rem;
      background-color: #f0f0f0;
      div{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        a{
             -webkit-box-flex: 1;
             -webkit-flex: 1;
          line-height: 1.2rem;
          flex: 1;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          font-size: 15px;
          text-align: center;
          border-bottom: 1px solid #dedede;
          border-left: 1px solid #dedede;
        }
        a.top-nav-active{
          background-color: #ffffff;
        }
      }
    }
    .goods-list{
      margin-left: 2.5rem;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
      box-sizing: border-box;
      border-left: 1px solid #dedede;
    }
    .weui-cell p{
      color: @huang;
      font-size: 16px;
    }
    .list-item{
      border-bottom: 1px solid #dedede;
      position: relative;
      i{
        position: absolute;
        right: 5px;
        top:0;
        width: 30px;
        height: 30px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .weui-cells{
        padding: 10px 15px;
      }
      .weui-cell{
        padding: 0;
      }
      h4{
        max-width: 89%;
        font-size: 14px;
        margin-bottom: 8px;
        text-align: left;
        word-break: break-all;
      }
    }
    .weui-cell:before{
      left: 0;
      border-top: 0;
    }
    .weui-cells{
      margin-top: 0;
    }
    .weui-cells:after,.weui-cells:before{
      border-bottom: 0;
      border-top: 0;
    }
    .vux-number-input{
      font-size: 14px !important;
      border:1px solid #e6e6e6 !important;
      width: 60px !important;
      height: 28px;
      margin: 0 10px;
      color: @huang !important;
      border-radius: 3px !important;
    }
    .vux-number-round .vux-number-selector{
      width: 20px !important;
    }
    .vux-number-selector{
      height: 20px !important;
      line-height: 10px !important;
      margin-top: 4px;
    }
    .vux-number-round .vux-number-selector-sub, .vux-number-round .vux-number-selector-plus{
      border:1px solid @huang !important;
      background-color: @huang;
    }
    .vux-number-selector svg{
      width: 15px !important;
      height: 15px !important;
      fill:#fff !important;
      font-weight: bold !important;
    }
    .vux-number-round .vux-number-selector.vux-number-disabled{
      border:1px solid #e6e6e6 !important;
      background-color: #fff;
    }
    .vux-number-round .vux-number-selector.vux-number-disabled svg{
      fill: #999 !important;
    }
    .car{
      position: fixed;
      bottom: -10px;
      width: 100%;
      .weui-cells{
        border-top:1px solid #dedede;
      }
      span{
        color: @hui;
        margin-top: -10px;
        i{
          color:@huang ;
          font-size: 16px;
          margin-left: 5px;
        }
      }
    }
    .car-icon{
      position: relative;
      margin-right: 40px;
      img{
        width: 40px;
      }
      i{
        position: absolute;
        display: block;
        top:-8px;
        right: -10px;
        font-size: 12px;
        width:22px ;
        height: 22px;
        border-radius: 50%;
        background-color: #ff9800;
        color: #fff;
        text-align: center;
        line-height: 22px;
      }
    }
    .back{
      position: fixed;
      z-index: 900;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
    }
    .fold-enter-active, .fold-leave-active {
      transition: all 1s;
    }
    .cart-list{
      position: fixed;
      z-index: 950;
      width: 101%;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      background-color: #FFFFFF;
      text-align: center;
      border-radius: 3px;

      .weui-cells{
        padding: 0;
        margin-top: 0;
      }
      .list-item{
        .weui-cells{
          padding: 10px 15px;
        }
      }
      .car-icon{
        position: absolute;
        top:-34px;
        left: 10px;
      }
      button{
        width: 100px;
        float: right;
        margin-right: 0;
        margin-top: -5px;
      }
      b{
        display: inline-block;
        min-width: 42%;
        margin-left: 2%;
        margin-top: -10px;
      }
      .weui-cells:after{
        border-bottom: 0;
      }
    }
    .scroller{
      margin-bottom:55px ;
      position: relative;
    }
    .weui-cells__title{
      color: #646464 !important;
      text-align: left;
      margin-top: 0;
      padding: 8px 20px 7px;
      border-bottom: 1px solid #dedede;
      font-size: 16px;
      margin-bottom: 0;
    }
  }
</style>
